
import { makeAutoObservable, observe } from 'mobx';
import { observer } from 'mobx-react';
import {FC, useEffect} from 'react'

class Timer {
  secondsPassed = 100;

  constructor() {
    makeAutoObservable(this)
  }

  increase() {
    this.secondsPassed += 1;
  }

  reset() {
    this.secondsPassed = 0;
  }
}

const myTimer = new Timer()

type PropsType = {
  timer: Timer
}

const TimerView = observer((props:PropsType) => {
  const timer = props.timer;
  return(
    <div>
      {timer.secondsPassed}
      <button onClick={() => timer.reset()}>reset</button>
    </div>
  )
})

const BasicDemo: FC = () => {
  useEffect(() => {
    const id = setInterval(() => {
      myTimer.increase()
    }, 1000);

    return () => {
      clearInterval(id);
    }
  });

  return(
    <>
      <div>Mobx Demo</div>
      <TimerView timer={myTimer} />
    </>
  )
}

export default BasicDemo;